<template>
  <div class="card-page_container">
    <!-- 看板 考勤卡片 头部 名称 -->
    <div class="card-header_container">
      <div class="theme-title-bg">
        <img src="~images/watermark/water_mark_late.png" v-if="waterMarking === 'late'" />
        <img src="~images/watermark/water_mark_access.png" v-if="waterMarking === 'access'" />
        <img src="~images/watermark/water_mark_temper.png" v-if="waterMarking === 'temper'" />
      </div>
      <div class="late_date">{{countInfo.timeTitle}}</div>
      <div class="late-people_static">
        <span>{{countInfo.title}}</span>
        <span>{{countInfo.total | formateStatisTotal}}</span>
        <span>/</span>
        <span>{{countInfo.conut | formateStatisTotal}}</span>
        <span>人</span>
      </div>
    </div>
    <!-- 卡片信息 主体-->
    <div v-for="(item, index) in tableData" :key="index">
       <StuMain
        :info="item"
       />
    </div>
    <!-- 无数据 -->
    <div class="no-data-bg" v-if="tableData.length < 1">
      <van-empty description="暂无数据" />
    </div>
    <!-- 底部 查看-->
    <div class="botton-look-all" v-if="tableData.length > 1" @click="sellAll">查看全部</div>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default:()=> [],
    },
    waterMarking: {
      type: String,
      default: 'late',
    },
    countInfo: {
      type: Object,
      default:()=> {},
    },
    dateTimeInfo: {
      type: Object,
      default:()=> {},
    },
  },
  methods: {
    sellAll() {
      /* 查看全部 */
      this.$store.commit('setSwitchPage',{ page: this.waterMarking })
      this.$router.push({
        name:'panelScreen',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~styles/default/attend_card.scss";
</style>